<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		

		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<table border="">
				<tr v-for="(g,i) in goods">
					<td>
						{{g.id}}
					</td>
					<td>
						{{g.name}}
					</td>
					<td>
						{{g.price}}
					</td>
					<td>
						<img :src="g.img"/>
					</td>
					<td>
						{{g.qty}}
					</td>
					<td>
						<button type="button" @click="del(i)">删除</button>
					</td>
				</tr>
			</table>
			商品编号:<input type="text" v-model="id"/><br />
			商品名:<input type="text" v-model="name" /><br />
			商品价格:<input type="text" v-model="price" /><br />
			商品图片:<input type="image" v-model="imgSrc"/><br />
			商品库存:<input type="text" v-model="qty"/><br />
			<button @click="add">添加</button>
		</div>
		
		<script>
			var app = Vue.createApp({
				data(){
					return {

						goods:[
							{
								id:"商品编号",
								name:"商品名",
								price:"商品价格",
								imgSrc:"商品图片",
								qty:"商品库存"
								
							},
							{
								id:1,
								name:"iPhone14",
								price:8888,
								imgSrc:"<file:///D:/javascript/00-实例/img/iphone14.jpg>",
								qty:5
								
							},
							{
								id:2,
								name:"华为mate6",
								price:8888,
								imgSrc:"<file:///D:/javascript/00-实例/img/mate40.jpg>",
								qty:3
							}
						]
					}
				},
				methods:{
					add:function(){
						
						console.log(this.id+","+this.name+","+this.price+","+this.pic+","+this.qty)
						var g={
							id:parseInt(this.id),
							name:this.name,
							price:parseInt(this.price),
							img:this.img,
							qty:parseInt(this.qty)
						}
						this.goods.push(g);
					},
					del:function(i){
						// splice(指定位置，删除几i个)
						this.goods.splice(i,1)
					}
				}
			});
			var vm = app.mount("#app")	
		</script>
		
			
		<script>
			// 练习:
			// 参考学生信息管理 制作一个商品管理
			// 实现商品的列表 添加 删除
			// 商品编号  商品名  商品价格  商品图片             商品库存
			//    1     iPhone14 8888    ./img/iphone14.jpg      5
			//    2     华为mate6 8888    ./img/mate40.jpg      3
			
			
		</script>
	</body>
</html>
